<template>
  <div class="customServe">
    <!-- 搜索表单 -->
    <div class="topSearchBox">
      <el-form ref="searchForm" :model="searchForm" :rules="feeDialogRules" label-width="90px" :inline="true" size="mini">
        <el-row class="searchDate">
          <el-form-item label="流水号：" prop="waterNum">
            <el-input v-model="searchForm.waterNum" clearable></el-input>
          </el-form-item>
          <el-form-item label="起始时间：" prop="startDay">
            <el-date-picker v-model="searchForm.startDay" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：" prop="endDay">
            <el-date-picker v-model="searchForm.endDay" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="searchBtn">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <div class="tableTitle">托单列表</div>
      <!-- 托单列表 表格 -->
      <el-table :data="billTableData" border :height="billTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row>
        <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
        <el-table-column prop="bdcCode" label="流水号" width="150px" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="bdcStatusName" label="状态" align="center" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="tayStates" label="口岸" show-overflow-tooltip  sortable >宁波港</el-table-column>
        <el-table-column prop="bdcShipper" label="船公司" show-overflow-tooltip  sortable></el-table-column>
        <el-table-column prop="bdcVesselname" label="英文船名" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcVoyage" label="航次" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcBillno" label="提单号" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcDestport" label="目的港" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcGoodsnumbers" label="件数" align="center" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcGoodsweight" label="毛重" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcGoodsvolume" label="体积" align="center" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="bdcContractno" label="合同号" align="center" show-overflow-tooltip sortable ></el-table-column>
        <el-table-column prop="tayOprtdate" label="货代" show-overflow-tooltip sortable >上海文景信息科技有限公司</el-table-column>
        <el-table-column prop="tayOprtdate" label="附件" show-overflow-tooltip sortable >无</el-table-column>
        <el-table-column prop="bdcRemark" label="备注" show-overflow-tooltip sortable ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.pageSize"
          :layout="Pagination.layout"
          :total="Pagination.total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import { getKajgList } from '@/request/api'
import paginationMixin from '@/mixins/pagination'
export default {
  name: 'router.clearancePass',
  mixins: [paginationMixin],
  data() {
    return {
      searchForm: {
        waterNum: '', // 流水号
        startDay: new Date((new Date()) - 7*24*3600*1000), // 开始时间
        endDay: new Date(), // 结束时间
      },
      billTableData: [], // 托单列表 表格数据
      billTableHeight: 650, // 托单列表 表格高度

    }
  },
  mounted() {
    this.getSelectData()
  },
  methods: {

    searchBtn() {
      this.getSelectData()
      console.log(this.searchForm)
    },
    getSelectData(){
      getKajgList(this.searchForm).then(response => {
        console.log(response)
        this.billTableData = response.data
        this.Pagination.total=response.total
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.customServe {
  .topSearchBox {
    padding: 10px 0 0 10px;
  }
  .tableBox {
    .tableTitle {
      font-size: 14px;
      font-weight: bold;
      padding-left: 15px;
      margin-bottom: 20px;
    }
    .block {
      margin-top: 10px;
    }
  }
}

.searchDate .el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 193px;
}
</style>

